<template>
    <div>
        <el-row>
            <el-col :xs=24 :sm=12 :md="12">
                <el-alert
                    title="选择需要进行权限控制的路由"
                    description="进行权限控制后, 可以指派给指定用户组, 从而限制用户访问. 保存之后需要重新设置用户组权限"
                    type="info"
                    :closable="false"
                    show-icon>
                </el-alert>
                <el-divider></el-divider>
                <el-form ref="form" label-width="0px" v-loading="loading">
                    <el-form-item>
                        <el-card class="access-route-card" v-for="(pVal, module) in routeWithGroups" :key="module">
                            <div slot="header" class="clearfix">
                                <el-checkbox
                                    @change="handleCheckAllChange($event, module)"
                                    :indeterminate="isIndeterminate[module]"
                                    v-model="selectedAll[module]">
                                    {{ pVal.name }}
                                </el-checkbox>
                            </div>
                            <el-checkbox-group v-model="selected">
                                <el-checkbox
                                    @change="handleCheckedChange($event, module)"
                                    v-for="(cVal, cKey) in pVal.child"
                                    :label="cVal.route"
                                    :key="cKey">
                                    {{ cVal.cname }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-card>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="store" :loading="submitLoading">保存</el-button>
                        <el-button @click="$router.go(-1)">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            submitLoading: false,
            selectedAll: {},
            selected: [],
            access: [],
            routes: [],
            isIndeterminate: {},
        }
    },
    computed: {
        // 分组后的路由
        routeWithGroups () {
            let routes = {};
            for (let i in this.routes) {
                let module = i.substr(0, i.indexOf('.'));
                if (routes[module]) {
                    routes[module].child.push({
                        route: i,
                        cname: this.routes[i],
                    })
                } else {
                    routes[module] = {
                        name: this.routes[i].substr(0, this.routes[i].indexOf('.')),
                        child: [
                            {
                                route: i,
                                cname: this.routes[i],
                            }
                        ]
                    };
                }
            }
            return routes;
        },
    },
    watch: {
        routeWithGroups() {
            this.autoSelected();
        },
        '$route' (val) {
            if (val.name === 'manager.role-access') {
                this.initData();
            }
        }
    },
    methods: {
        getData() {
            this.loading = true;
            this.$store.dispatch('roleAccess/Lists').then(res => {
                this.selected = res.data.data.access;
                this.routes = res.data.data.routes;

            }).finally(() => {
                this.loading = false;
            });
        },
        // 顶级权限选中|取消, 自动选中|取消子级权限
        handleCheckAllChange(val, pKey) {
            //console.log('handleCheckAllChange', val, pKey);
            if (!this.routeWithGroups[pKey].child || !this.routeWithGroups[pKey].child.length) {
                return;
            }
            this.isIndeterminate[pKey] = false;
            if (val) {
                this.routeWithGroups[pKey].child.map(v => {
                    if (this.selected.indexOf(v.route) === -1) this.selected.push(v.route);
                });
            } else {
                this.routeWithGroups[pKey].child.map(v => {
                    if (this.selected.indexOf(v.route) > -1) this.selected.splice(this.selected.indexOf(v.route), 1);
                });
            }
        },
        // 子级选中|取消, 检查顶级权限是否需要选中|取消
        handleCheckedChange(val, pKey) {
            //console.log('handleCheckedChange', val, pKey);
            if (!this.routeWithGroups[pKey].child || !this.routeWithGroups[pKey].child.length) return;
            let childRouteArr = this.routeWithGroups[pKey].child.map(v => { return v.route; });
            let checkedLength = this.selected.filter(v => childRouteArr.includes(v)).length;
            this.isIndeterminate[pKey] = checkedLength > 0 && checkedLength < childRouteArr.length;
            this.selectedAll[pKey] = checkedLength === childRouteArr.length;
        },
        // 保存权限路由
        store() {
            this.submitLoading = true;
            this.$store.dispatch('roleAccess/Store', {
                routes: this.selected
            }).then(res => {
                this.$message.success(res.data.message);
                this.initData();
            }).finally(() => {
                this.submitLoading = false;
            });
        },
        // 自动选中
        autoSelected() {
            for (let i in this.routeWithGroups) this.handleCheckedChange(true, i);
        },
        initData() {
            this.getData();
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>

.access-route-card {
    margin: 0 0 10px 0;
    .el-card__header,.el-card__body {
        line-height: 19px;
    }
    .el-card__body:empty {
        padding: 0;
    }
    /*.el-card__header {*/
    /*    padding: 0 20px;*/
    /*}*/
    /*.el-card__body {*/
    /*    padding: 0 20px;*/
    /*}*/
}
</style>
